<template>
  <div>
    <template v-if='contentType==1'>
      <Editor365 v-if="editorType==='Editor365'" ref='Editor' v-model='richContent'
                 :config='{readonly:readOnly}'></Editor365>
      <EditorM v-else ref='Editor' v-model='richContent' :config='{readonly:readOnly}'></EditorM>
    </template>
    <video-chose v-else-if='contentType == 2' v-model='videoInfo'></video-chose>
    <audio-chose v-else-if='contentType == 3' v-model='voiceUrl'></audio-chose>
    <h5-editor v-else-if='contentType == 4' v-model='htmlUrl'></h5-editor>
  </div>
</template>

<script>
import Editor365 from './Editor365'
import EditorM from './EditorM'
import VideoChose from './VideoChose'
import AudioChose from './AudioChose'
import H5Editor from './H5Editor'
import { getAction } from '@/api/manage'

export default {
  name: 'Editor',
  components: { H5Editor, AudioChose, VideoChose, EditorM, Editor365 },
  props: {
    editorType: {},
    contentType: {
      type: String | Number,
      default() {
        return 1
      }
    },
    params: {},
    errors: [],
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      richContent: '',
      videoInfo: {
        videoUrl: '',
        mbLogoUrl: ''
      },
      voiceUrl: '',
      htmlUrl: ''
    }
  },
  watch: {
    errors: {
      immediate: true,
      handler: function(newVal) {
        if (newVal && newVal instanceof Array) {
          newVal.forEach(word => {
            if (word.errWord && word.corWord) {
              const errorWord = word.errWord
              let replaceSpanStyle = `<span style="padding-bottom: 2px;border-bottom: 3px solid #108ee9">`
              if (word.errLevel === "1") {
                replaceSpanStyle = `<span style="padding-bottom: 2px;border-bottom: 3px solid red">`
              }
              let replaceWord = replaceSpanStyle + errorWord + '</span>'
              const regexp = new RegExp('((?:.*?' + errorWord + '.*?){' + (word.index) + '}.*?)' + errorWord, 'm')
              const rightContent = this.richContent.replace(regexp, '$1' + replaceWord)
              this.richContent = rightContent.replaceAll(replaceSpanStyle + replaceWord + '</span>', replaceWord)
            }
          })
        }
      }
    }
  },
  created() {
    this.loadInitValue()
  },
  methods: {
    loadInitValue() {
      getAction('task/taskInfo/queryTaskContentInfo', this.params).then(res => {
        if (res.success) {
          this.richContent = res.result.content
          this.videoInfo = {
            videoUrl: res.result.videoUrl,
            mbLogoUrl: res.result.mbLogoUrl
          }
          this.voiceUrl = res.result.voiceUrl
          this.htmlUrl = res.result.htmlUrl
        }
      })
    },
    insert(content) {
      if (this.$refs.Editor) {
        this.$refs.Editor.setFocusContent(content)
      }
    },
    getRichContent() {
      let result = { contentType: this.contentType }
      if (this.contentType == 1) {
        result.richContent = this.richContent
      } else if (this.contentType == 2) {
        result.videoUrl = this.videoInfo.videoUrl
      } else if (this.contentType == 3) {
        result.voiceUrl = this.voiceUrl
      } else if (this.contentType == 4) {
        result.htmlUrl = this.htmlUrl
      }
      return result
    },
    selfValidate() {
      return new Promise((resolve, reject) => {
        //文章类型
        if (this.contentType == 1) {
          if (this.richContent) {
            resolve({ key: 'richContent', value: this.richContent })
          } else {
            reject('文本内容为空，暂不保存')
          }
        } else if (this.contentType == 2) {
          //视频
          if (this.videoInfo.videoUrl) {
            resolve({ key: 'textContentInfo', value: this.videoInfo })
          } else {
            reject('请选择视频文件')
          }
        } else if (this.contentType == 3) {
          //音频
          if (this.voiceUrl) {
            resolve({ key: 'textContentInfo', value: { voiceUrl: this.voiceUrl } })
          } else {
            reject('请选择音频文件')
          }
        } else if (this.contentType == 4) {
          //H5
          if (this.htmlUrl) {
            resolve({ key: 'textContentInfo', value: { htmlUrl: this.htmlUrl } })
          } else {
            reject('请输入H5地址')
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>